<section class="todoapp">
  <header class="header">
    <h1>todolist</h1>
    <app-add-todo (onAddTodo)="addTodo($event)"></app-add-todo>
  </header>
  <app-todo-list
    [todos]="todos"
    [visibleTodos]="visibleTodos"
    [activeTodoCount]="activeTodoCount"
    [todoBeingEdited]="todoBeingEdited"
    (onToggleTodo)="toggleTodo($event)"
    (onToggleAllTodo)="toggleAllTodo($event)"
    (onStartEditTodo)="startEditTodo($event)"
    (onEndEditTodo)="endEditTodo($event)"
    (onDestroyTodo)="destroyTodo($event)"
  >
  </app-todo-list>
  <app-filter-todo
    [activeTodoCount]="activeTodoCount"
    [completedTodoCount]="completedTodoCount"
    [visibilityFilter]="visibilityFilter"
    (onFilterChange)="setVisibilityFilter($event)"
    (onClearCompletedTodo)="clearCompletedTodo()"
  >
  </app-filter-todo>
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <p>TodoList based on angular</p>
  <p>Source:
    <a href="https://github.com/he-zhiyong/todolist/tree/master/angular-todolist"> GitHub </a>or
    <a href="https://gitee.com/he-zhiyong/todolist/tree/master/angular-todolist"> Gitee </a>
  </p>
</footer>
